<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--如果把所有的css都写在html文件里面，一旦样式比较多的时候，就会显得不易维护
这个时候就会选择把所有的css内容，放在一个独立文件里
然后在html中引用该文件
通常这个文件会被命名为style.css-->

<!--直接在html里面写样式-->
<style>
    .red{color: red}
    .blue{color: blue}
</style>

<p class="red">红色</p>
<p class="blue">蓝色</p>

<!--把样式代码写在style.css，并在html中包含它-->
<link rel="stylesheet" href="style.css">
<p class="p1">红色</p>
<p class="p2">蓝色</p>

<!--在测试的时候，大家写的css文件都是放在本地的，比如d:/style.css
这时就应该写成
href="file://d:/style.css"-->
</body>
</html>